window.addEventListener('load', function () {
  var nav = this.document.querySelector('.nav');
  var navAll = this.document.querySelector('.nav').children;
  let dotAll = this.document.querySelector('.dot-all').children;
  let startX = 0;
  let moveX = 0;
  let x = 0;
  let offset = nav.offsetWidth / 2;
  navAll[0].addEventListener('touchstart', function (e) {
    startX = e.targetTouches[0].pageX
  })
  navAll[0].addEventListener('touchmove', function (e) {
    moveX = e.targetTouches[0].pageX;
    x = startX - moveX;
    if (x > 0 && x < 375) {
      flag = 0;
      nav.style = "transform: translate(" + (-x) + "px,50px)";
      nav.style.height = "182px";
      e.preventDefault();

    }
    if (x >= 100) {
      nav.style = "transform: translate(" + (-offset) + "px, 50px)";
      nav.style.height = "310px";
      nav.style.transition = "all .5s";
      dotAll[1].className = 'dot-current-right';
      dotAll[0].className = '';
    }
  })
  navAll[1].addEventListener('touchstart', function (e) {
    startX = e.targetTouches[0].pageX
  })
  navAll[1].addEventListener('touchmove', function (e) {
    moveX = e.targetTouches[0].pageX;
    x = startX - moveX;
    if (x < 0 && x > -375) {
      nav.style = "transform: translate(" + (-x - offset) + "px,50px)";
      nav.style.height = "310px";
      e.preventDefault();
    }
    if (x <= -100) {
      nav.style = "transform: translate(0px,50px)";
      nav.style.height = "182px";
      nav.style.transition = "all .5s";
      dotAll[0].className = 'dot-current-left';
      dotAll[1].className = '';
    }

  })
  navAll[0].addEventListener('touchend', function (e) {
    if (x < 100) {
      nav.style = "transform: translate(0px,50px)";
      nav.style.height = "182px";
      nav.style.transition = "all .5s";

    }
  })
  navAll[1].addEventListener('touchend', function (e) {
    if (x >= -100) {
      nav.style = "transform: translate(" + (-offset) + "px,50px)";
      nav.style.height = "310px";
      nav.style.transition = "all .5s";
    }
  })
})